<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span class="header-title">{{ title }}</span>
        <el-button type="primary">新增</el-button>
      </div>
    </template>
    <div class="filter-container">
      <div
        class="filter-group"
        v-for="(group, index) in filterOptions"
        :key="group.id"
      >
        <div class="filter-group-title">{{ group.name }}</div>
        <div class="filter-group-buttons">
          <span
            style="display: flex; align-items: center"
            v-for="(option, idx) in group.childs"
            :key="option.id"
            :class="['tag', { active: isSelected(group.id, option.id) }]"
            @click="() => toggleOption(group.id, option.id)"
          >
            <span> {{ option.name }}</span>
            <Close class="Close" />
          </span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { reactive, onUpdated } from 'vue';
const emit = defineEmits(['updateSelected', 'onSearch']);
const props = defineProps({
  title: {
    type: String,
    default: '下载',
  },
  placeholder: {
    type: String,
    default: '',
  },
  filterOptions: {
    type: Array,
    default: () => [],
  },
});
// 搜索值

// 用于存储每个分类的选中状态，初始化为每个组的 '不限'
const selected = reactive({});
onUpdated(() => {
  init();
});
// 初始化每个组的默认选项为 '不限'
const init = () => {
  props.filterOptions.forEach((group) => {
    selected[group.id] = ['all']; // 每组选中"不限"，通过id来处理
  });
};
// 判断某个选项是否被选中
const isSelected = (groupId, optionId) => {
  // 确保 selected[groupId] 存在后再调用 includes
  return selected[groupId]?.includes(optionId);
};

// 切换选项逻辑
const toggleOption = (groupId, optionId) => {
  // 如果 groupId 对应的选项还未初始化，则先初始化为空数组
  if (!selected[groupId]) {
    selected[groupId] = [];
  }

  const currentSelection = selected[groupId];
  const isOptionSelected = currentSelection.includes(optionId);

  // 处理 "不限" 选项的情况
  if (optionId === 'all') {
    // 清空当前分组所有选项，只保留 "不限"
    selected[groupId] = ['all'];
  } else {
    // 如果当前选项已选中，取消选中该选项
    if (isOptionSelected) {
      selected[groupId] = currentSelection.filter((id) => id !== optionId);
    } else {
      // 否则选中该选项，并取消 "不限"
      selected[groupId] = [
        ...currentSelection.filter((id) => id !== 'all'),
        optionId,
      ];
    }

    // 如果该分组的选项为空，自动选中 "不限"
    if (selected[groupId].length === 0) {
      selected[groupId] = ['all'];
    }
  }

  // 将选中的 id（不包括"不限"）传给父组件
  emit('updateSelected', flattenSelected());
};

// 将 selected 中所有选中的 id 扁平化为一个数组，并过滤掉 "不限" (all)
const flattenSelected = () => {
  return Object.values(selected)
    .flat() // 将所有组的选项扁平化为一个数组
    .filter((id) => id !== 'all'); // 过滤掉 "不限" 的 id
};
// 搜索
</script>

<style lang="scss" scoped>
.header-title {
  line-height: 20px;
  color: #131414;
  font-weight: 600;
}

.box-card {
  padding: 40px;
  padding-top: 10px;
  margin: 0 auto;
}

:deep(.el-card__header) {
  padding: 0 0 15px 0 !important;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-input-group {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.el-input {
  width: 323px;
  display: flex;
  align-items: center;
}

:deep(.el-input__wrapper) {
  height: 40px !important;
  border: 1px solid #1c5dff !important;
  /* 设置蓝色边框 */
  box-shadow: none !important;
  border-right: none !important;
  /* 移除输入框右侧边框，使其与按钮连为一体 */
  border-radius: 4px 0 0 4px;
  /* 圆角只应用于左侧 */
}

:deep(.el-input-group__append) {
  width: 86px;
  background: #1c5dff !important;
  height: 42px;

  .el-button {
    width: 86px;
  }
}

.filter-container {
  display: flex;
  flex-direction: column;
}

.filter-group {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.filter-group-title {
  color: #86909c;
}

.filter-group-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}
.Close {
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-left: 10px;
}
.tag {
  color: #4e5969;
  font-size: 14px;
  padding: 4px 16px;
  border-radius: 4px;
  border: 1px solid #e5e6eb;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;

  &:hover {
    color: #165dff;
    border: 1px solid #165dff;
  }

  /* 当选中时添加 active 类的样式 */
  &.active {
    color: #165dff;
    border: 1px solid #165dff;
  }
}
</style>
